import React,{ChangeEvent, FC, useState,useEffect} from "react";
import { Input } from 'antd';
import { useLocation,useNavigate,useSearchParams } from "react-router-dom";
import { LIST_SEARCH_PARAM_KEY } from "../../constant";
const {Search} = Input
const ListSearch:FC = ()=>{
    const nav = useNavigate()
    const {pathname} = useLocation()
    const [value,setValue] = useState<string>('')
    const [searchParams] = useSearchParams()
    useEffect(()=>{
        const curVal = searchParams.get(LIST_SEARCH_PARAM_KEY) || ''
        setValue(curVal)
    },[searchParams])
    
    const handleChange = (e:ChangeEvent<HTMLInputElement>)=>{
        setValue(e.target.value)
    }
    const handleSearch = (value:string)=>{
        console.log(value)
        nav({
            pathname,
            search:`${LIST_SEARCH_PARAM_KEY}=${value}`
        })
    }

    return <><Search placeholder="请输入关键字" allowClear value={value} onSearch={handleSearch} onChange={handleChange} style={{width:'200px'}}/></>
}

export default ListSearch